<template>
	<view>
		<view style="position: absolute; top: 0; left: 5%; width: 90%; height: 80rpx;  z-index: 9;">
			<view class="fanhui_betn" @click="fanhui()">
				<image src="/static/shouye/容器@1x.png" class="img_fanbtn"></image>
			</view>
			<view class="fanhui_betns" style="margin-left: 20px;" @click="searchHandler()">
				<image src="/static/shouye/组 348@1x.png" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="fanhui_betns" style="margin-left: 20px; float: right;"  @click="tishikuangfx = true">
				<image src="/static/shouye/分享@2x.png" style="width: 100%; height: 100%;"></image>
			</view>
			
		</view>
		<image src="/static/fengxiang.png" @click="tishikuangfx = false" style="width: 100%; height: 100vh;position: absolute; z-index: 9999; top: 0; left: 0;" v-if="tishikuangfx == true"></image>
		<view style="position: absolute; top: 90rpx; left: 5%; width: 90%; height: 80rpx;  z-index: 9;">
			<view
				style="width:320rpx;height: 45rpx;float: left; margin-top: 20rpx; line-height: 45rpx; border-radius: 30rpx;opacity: 1;background: #DDF1FF;color: #1684FC;font-size: 26rpx;">
				<image src="/static/dwt.png"
					style="width: 24rpx; height: 24rpx; float: left; margin-left: 20rpx; margin-top: 10rpx; ">
				</image>
			 <view style="float: left;">
				 	{{datadiceng}} <text style="color: red; margin-left: 10rpx;">总计<text>&nbsp;{{listtabbuild.length}}&nbsp;</text>幢</text>  
			 </view>
			</view>
<view class="fanhui_betns" style="margin-left: 20px; float: right; " @click="toggles('bottom')">
				<image src="/static/组 361@1x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view style="position: absolute; top:180rpx; right: 5%;  height: 80rpx;  z-index: 9;">
			

			<view class="fanhui_betns" style="margin-left: 20px; float: right;" @click="toggle('bottom')">
				<image src="/static/组 360@1x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view style="position: absolute; top:270rpx; right: 5%;  height: 80rpx;  z-index: 9;">

			<view class="fanhui_betns" style="margin-left: 20px; float: right;" @click="zhengce = true">
				<image src="/static/shouye/组 683@2x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view style="position: absolute; bottom:470rpx; right: 20rpx;  height: 80rpx;  z-index: 9;">
			<view class="fanhui_betns"
				style="margin-right: 7px; float: right;width: 70rpx;height: 70rpx;border-radius: 10rpx;background: #ffffff;display: flex;justify-items: center;justify-content: center;"
				@click="resetLocation">
				<image src="/static/map/location.png" style="width: 90%; height: 90%;margin-top: 2px;"></image>
			</view>
		</view>
		<view
			style="margin-left: 5%; position: absolute; z-index: 99; bottom: 450rpx; width:50%;pointer-events: none;">
			<view style="width: 90%;">
				<view class="ai-button-container" :style="{
							transform: `translate(${aiButton.x}px, ${aiButton.y}px)`,
							transition: aiButton.isDragging ? 'none' : 'transform 0.3s'
						}" @touchstart="handleAiButtonTouchStart" @touchmove="handleAiButtonTouchMove" @touchend="handleAiButtonTouchEnd"
					@touchcancel="handleAiButtonTouchEnd">
					<image src="/static/shouye/ai.png"
						style="width: 338rpx; height: 80rpx; float: left;pointer-events: none;"v-if="xiaoshi == 0">
					</image>
					
					<image src="/static/detail/gbxx.png" style="width: 30rpx; height: 30rpx; position: absolute; top: 26px; right: 20px; z-index: 9999999;" v-if="xiaoshi == 0" @click="xiaoshiai"></image>
				</view>
			</view>
		</view>
		<view v-if="zhengce == true"
			style="position: absolute; top:370rpx;right:30rpx; width: 469rpx;border-radius: 20px;opacity: 1;background: #FFFFFF;  z-index: 9999999999999999999999999;">
			<image src="/static/shouye/kjzc.png" style="width: 90%; height: 40rpx; margin-top: 20rpx; left: 5%;"
				@click="zhengce = false"></image>
			<view
				style="font-size: 20rpx;color: #31343B;font-family: Source Han Sans; width: 90%; margin-top: 20rpx; margin-left: 5%;">
				一、为企业提供“创业空间—孵化器—加速器—创产用房—主题楼宇（园区）—产业用地”全生命周期的办公空间支持。
				<view>
					1.创业空间。认定为青年创新创业人才及团队的，可申请最高 30个办公卡位或“一间办公室”，给予最高三年免租。
				</view>
				<view>
					2.孵化器。对符合条件的初创型企业，入驻孵化器的，可申请最高300平方米的“多间办公室”，给予最高三年免租。
				</view>
				<view>
					3.加速器。对符合条件的成长型企业，入驻加速器的，可申请最高2000平方米的“一层办公楼”的空间支持，第一年免租，第二、第三年最高享受租金三折优惠
				</view>

			</view>
			<view
				style="font-size: 20rpx;color: #31343B;font-family: Source Han Sans; width: 90%; margin-top: 5rpx; margin-left: 5%;">
				二、在罗湖区购置自用办公用房500平方米以上且符合条件的企业，可按购置金额一定比例给予商办去化支持，分年发放。
			</view>
			<image src="/static/shouye/gdzc.png" style="width: 283rpx; height: 40rpx; margin-top: 20rpx; left: 5%;">
			</image>
		</view>
		<uni-popup ref="popups">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view
					style="width: 100%; height: 1100rpx; background: #fff; border-top-right-radius:20px ; border-top-left-radius: 20px;">
					<view style="width: 90%; height: 100%; float: left; margin-left: 5%;">
						<view>
							<view style="float: left; margin-top: 20rpx;">
								<text style="font-size: 32rpx;font-weight: 500;">周边配套</text>
								<text style="font-size: 24rpx;color: #707683;">(可多选)</text>
							</view>
							<view style="float: right; display: flex; flex-direction: row; align-items: center;">
								<view style="margin-right: 30rpx; margin-top: 20rpx;color:#1684fc;font-size: 32rpx;"
									@tap="loadAllDatas()">查询</view>
								<view style="margin-right: 30rpx; margin-top: 20rpx;color:#f56c6c;font-size: 32rpx;"
									@tap="clearAllDatas()">清空</view>
								<image src="/static/guanbi.png" @tap="closeFilterHandler()"
									style="margin-top: 20rpx; width: 24rpx; height: 24rpx; "></image>
							</view>
						</view>
						<view class="wuyeleixin" style="height: 1200rpx;">
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">住房</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left;"
									:class="selectMatchingTypes.includes(4) ? 'mat_selected' : ''"
									@click="matTypebtn(4)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/容器@1x (10)bak.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(4) ? '#1684FC' : '#000000e6'}">人才住房
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectMatchingTypes.includes(3) ? 'mat_selected' : ''"
									@click="matTypebtn(3)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/学士帽@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(3) ? '#1684FC' : '#000000e6'}">人才驿站
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectMatchingTypes.includes(2) ? 'mat_selected' : ''"
									@click="matTypebtn(2)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/容器@1x (10).png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(2) ? '#1684FC' : '#000000e6'}">
										市场化
										</br>
										租赁住房</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectMatchingTypes.includes(1) ? 'mat_selected' : ''"
									@click="matTypebtn(1)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/房屋信息@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(1) ? '#1684FC' : '#000000e6'}">
										优质居住</br>
										空间</view>
								</view>
							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">交通</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('150500') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('150500')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/dtk.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('150500') ? '#1684FC' : '#000000e6'}">地铁口
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('150700') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('150700')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/gjc.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('150700') ? '#1684FC' : '#000000e6'}">公交站
									</view>
								</view>

							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">生活</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('120000') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('120000')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/sq.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('120000') ? '#1684FC' : '#000000e6'}">商圈
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('060101') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('060101')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/cs.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('060101') ? '#1684FC' : '#000000e6'}">超市
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('090100') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('090100')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/yy.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('090100') ? '#1684FC' : '#000000e6'}">医院
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('141200') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('141200')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/xx.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('141200') ? '#1684FC' : '#000000e6'}">学校
									</view>
								</view>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('160100') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('160100')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/yh.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('160100') ? '#1684FC' : '#000000e6'}">银行
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('100000') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('100000')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/jd.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('100000') ? '#1684FC' : '#000000e6'}">酒店
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('110101') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('110101')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/gy.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('110101') ? '#1684FC' : '#000000e6'}">公园
									</view>
								</view>

							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">i企</text>
								<text style="color: #3D3D3D;">服务站</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectMatchingTypes.includes(5) ? 'mat_selected' : ''"
									@click="matTypebtn(5)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/健康驿站@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(5) ? '#1684FC' : '#000000e6'}">创享驿站
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectMatchingTypes.includes(6) ? 'mat_selected' : ''"
									@click="matTypebtn(6)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/dq.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(6) ? '#1684FC' : '#000000e6'}">党群中心
									</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectMatchingTypes.includes(7) ? 'mat_selected' : ''"
									@click="matTypebtn(7)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/zh.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectMatchingTypes.includes(7) ? '#1684FC' : '#000000e6'}">
										综合服务基地</view>
								</view>

							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">其他</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; "
									:class="selectPoiTypes.includes('151000') ? 'mat_selected' : ''"
									@tap="poiSearchHandler('151000')">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/容器 570@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;"
										:style="{color:selectPoiTypes.includes('151000') ? '#1684FC' : '#000000e6'}">口岸
									</view>
								</view>


							</view>
						</view>


					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view
					style="width: 100%; height: 700rpx; background: #fff; border-top-right-radius:20px ; border-top-left-radius: 20px;">
					<view style="width: 90%; height: 100%; float: left; margin-left: 5%;">
						<view>
							<view style="float: left; margin-top: 20rpx;font-size: 32rpx;">筛选</view>
							<view style="float: right; display: flex; flex-direction: row; align-items: center;">
								<view style="margin-right: 30rpx; margin-top: 20rpx;color:#f56c6c;font-size: 32rpx;"
									@tap="clearFilterData()">清空</view>
								<image @click="gaunbi()" src="/static/guanbi.png"
									style="margin-top: 20rpx; width: 24rpx; height: 24rpx; float: right;"></image>
							</view>


						</view>
						<view class="wuyeleixin">
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">物业</text>
								<text style="color: #3D3D3D;">类型</text>
							</view>
							<view style="margin-top: 20rpx;">
								<view class="xinxili" :class="buildType == 0 ? 'quabu' : 'quanbuxx'"
									@click="brnindex(0)">全部
								</view>
								<view class="xinxili" :class="buildType == 1 ? 'quabu' : 'quanbuxx'"
									@click="brnindex(1)">
									政府物业</view>
								<view class="xinxili" :class="buildType == 2 ? 'quabu' : 'quanbuxx'"
									@click="brnindex(2)">
									社会物业</view>
								<view class="xinxili" :class="buildType == 3 ? 'quabu' : 'quanbuxx'"
									@click="brnindex(3)">
									国企物业</view>
							</view>
							<view
								style="font-size: 24rpx; width: 100%; float: left; margin-left: 5%; margin-top: 20rpx;">
								{{ datadiceng }}
							</view>
							<view style="margin-top: 20rpx;width: 100%; float: left;">
								<view class="xinxilis" v-for="(item,index) in tablist" @click="tabbtnli(index)"
									:class=" tablistindex == index ? 'mishuL' : 'quanbuxx'">{{item.name}}</view>

							</view>
							<view class="left_tab_sq">
								<view class="shangquanxli" @click="shangquanindex(index)" v-for="(item,index) in tabin"
									:class="indextab == index ? 'sqbjs': 'sqntms'">
									{{item.name}}
								</view>
							</view>
							<view class="right_tab_sq">
								<view class="wenziquyu" :class="clickPoiIndex === index ? 'wenziquyu_sqbjs' : ''"
									@click="poiClickHandler(item,index)" v-for="(item,index) in poiList" :key="index">
									{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="sharePopup" :mask-click="false" type="bottom">
			<share-view @close="closeShareHandler"></share-view>
		</uni-popup>
		<div class="mapbtn">
			<map-view style="width: 100%; height: 103vh;" ref="mapRef" :markers="covers" :polyline="polyline"
				:polygon="polygon" :latitude="latitude" :scale="scale" :longitude="longitude">
			</map-view>
		</div>
		<view
			style="height: 421rpx; position: absolute; right: 20rpx; left:20rpx; bottom: 20rpx; z-index: 9; background: #fff; border-radius: 20px; overflow: hidden;">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view
					style="display: flex; align-items: center; gap: 20rpx; width: fit-content; height: 100%; padding: 26rpx; box-sizing: border-box;">
					<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in listtabbuild"
						@click="detail(item)">
						<view class="listta">
							<view style="position: absolute; top: 15rpx; left: 15rpx; z-index: 99;">
								<view
									style="width: 40rpx; height: 40rpx; color: #fff; font-size: 22rpx; background-image: radial-gradient(#1684FC 30%, #8AB4F2 75%); border-radius: 100rpx; text-align: center; line-height: 40rpx; box-shadow: 0 0 8px rgba(0, 0, 0, 30%);">
									{{index +1}}</view>
							</view>
							<image :src="item.buildImg ? item.buildImg.split(',')[0] : '/static/default.png'"
								class="img_tab"></image>
							<view
								style="display: flex; flex-direction: column; justify-content: space-around; flex: 1; overflow: hidden; padding: 12rpx 0;">
								<view
									style="font-size: 30rpx; margin-left: 10px; overflow: hidden;white-space: nowrap;text-overflow:ellipsis; color: #3D3D3D; font-weight: 500;">
									{{item.buildName}}</view>
								<view v-if="Number(item.rentFeeStart) === 0 && Number(item.rentFeeEnd) === 0"
									style="font-size: 26rpx; margin-left: 10px; color: #FA3320; font-weight: 500;">面议
								</view>
								<view v-else
									style="font-size: 26rpx; margin-left: 10px; color: #FA3320; font-weight: 500;">¥{{
									item.rentFeeStart === item.rentFeeEnd
									? item.rentFeeStart
									: `${item.rentFeeStart}-${item.rentFeeEnd}`
									}}/㎡/月</view>
								<view style="font-size: 26rpx; margin-left: 10px; color: #707683;">空置面积:
									{{parseFloat(Number(item.vacancyArea).toFixed(2))}}㎡</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="searchPopup" :mask-click="false" type="bottom" style="z-index: 99999999999;">
			<search-view @close="closeSearchHandler"></search-view>
		</uni-popup>
		<EmptyMessage :types="emptyTypes" street></EmptyMessage>
	</view>
</template>

<script>
	import {
		getPoiSearch,
		getStreetPolygon,
		getBuildingList,
		getMatchinglistByStreet
	} from './api'
	import {
		getPolygonDatas,
		getCenterPoint
	} from './../../utils/index'
	import MapView from '@/components/map-view/index.vue'
	import ShareView from '@/components/share-view/index.vue'
	import SearchView from '@/components/search-view/index.vue'
	import EmptyMessage from './empty-message.vue'

	export default {
		components: {
			MapView,
			ShareView,
			SearchView,
			EmptyMessage,
		},
		data() {
			return {
				index: 0,
				scrollTop: 0,
				xiaoshi:0,
				old: {
					scrollTop: 0
				},
				scale: 15,
				zhengce: false,
				indextab: null,
				tabin: [{
					name: '商圈',
					value: '120000'
				}, {
					name: '地铁',
					value: '150500'
				}, ],
				tablist: [{
						name: '500m',
						value: 500,
					}, {
						name: '1km',
						value: 1000,
					}, {
						name: '2km',
						value: 2000,
					},
					{
						name: '5km',
						value: 5000,
					},
					{
						name: '8km',
						value: 8000,
					},
					{
						name: '10km',
						value: 10000,
					}
				],
				datadiceng: null, //街道名称
				radius: 1000 * 1, //周边1公里
				tablistindex: 0,
				latitude: 22.54760108,
				longitude: 114.1214231,
				streetCenter: {},
				covers: [],
				polyline: [],
				polygon: [],
				buildType: 0,
				listtabbuild: "",
				street: "",
				industryTag: "", //行业
				type: '',
				poiList: [],
				allPointList: [],
				typeCodes: [],
				allMatchingList: [],
				selectMatchingTypes: [], //筛选类型
				selectPoiTypes: [], //筛选类型
				clickPoiIndex: null,
				// AI按钮拖动相关
				aiButton: {
					x: 0,
					y: 0,
					startX: 0,
					startY: 0,
					isDragging: false,
					longPressTimer: null
				},
				tishikuangfx:false,
				emptyTypes: []
			}
		},
		onLoad(options) {
			const name = options.name
			let industryTag = options.industryTag || ''

			if (industryTag) {
				industryTag = decodeURIComponent(industryTag)
			}
			this.industryTag = industryTag
			if (name) {
				const streetName = decodeURIComponent(name)
				this.datadiceng = streetName
				this.loadStreetPolygon(streetName)
				this.loadBuildingList(streetName, industryTag)
			} else if (industryTag) {
				this.loadBuildingList("", industryTag)
			}
			// 直接调地图API的接口，下面代码不用执行
			return
			var data = options.industryTag
			if (data == "" || data == undefined) {
				this.street = options.name
				this.listtah()
			} else {
				this.industryTag = data
				this.listtah()
			}
			this.loalon()

			this.datadiceng = options.name
			this.matchinglist()
			this.streetlist()


		},
		methods: {
			xiaoshiai(){
				this.xiaoshi = 1
			},
			tap(e) {
				console.log(e)
			},
			tapMap(e) {
				console.log(e);
			},
			callouttap(e) {
				console.log(e);
			},
			tishikuang() {
				// uni.showToast({
				// 	title: '功能正在开发中...',
				// 	icon: 'none',
				// 	duration: 2000
				// });
			},
			openShareHandler() {
				this.$refs.sharePopup.open()
			},
			closeShareHandler() {
				this.$refs.sharePopup.close()
			},
			listtah(e) {
				var data = {
					street: this.street,
					industryTag: this.industryTag,
					buildType: '',
				}
				this.$rqt.buildlist(data).then(res => {
					console.log(res,6666666)
					var datalisttab = res.data
					datalisttab.sort(function(a, b) {
					  // 如果a的状态是1，b的状态不是1，a应该排在前面
					  if (a.keyStatus === 1 && b.keyStatus !== 1) {
					    return -1;
					  }
					  // 如果a的状态不是1，b的状态是1，b应该排在前面
					  if (a.keyStatus !== 1 && b.keyStatus === 1) {
					    return 1;
					  }
					  // 如果两者状态都为1或都为非1，则不改变顺序（这里可以不写）
					  return b.rentArea - a.rentArea;
					});
					console.log(datalisttab,8888888888888888);
					this.listtabbuild = datalisttab
					
					var datali = res.data
					const mapMarks = datali.map(item => {
						return {

							longitude: item.longitude,
							latitude: item.latitude,
							title: item.title,
							iconPath: item.buildImg,
							// iconPath: item.buildImg, // 可自定义标记点(需要注意,必须写成绝对路径,相对路径不生效)
							width: 30, //自定义图标宽
							height: 30, //自定义图标高
							joinCluster: true,

							//自定义坐标点内容展示
							callout: {
								// content: item.buildName,
								content: item.buildName,
								color: '#467bf0',
								bgColor: '#fff',
								borderColor: '#467bf0',
								borderRadius: 100,
								display: 'ALWAYS',
								textAlign: 'center',
								fontSize: 12,

							},


						}
					})

					this.covers = mapMarks
				})
			},
			streetlist() {


				this.$rqt.streetlist().then(res => {
					console.log(res.data, 222222222)
				})
			},
			matTypebtn(e) {
				// this.matType = e
				// this.matchinglist()
				// this.$refs.popups.close()
				const index = this.selectMatchingTypes.indexOf(e)
				if (index === -1) {
					this.selectMatchingTypes.push(e)
				} else {
					this.selectMatchingTypes.splice(index, 1)
				}
				// this.loadMatchinglist(e)
			},
			matchinglist() {
				var data = {
					matchingType: this.matType
				}
				this.$rqt.matchinglist(data).then(res => {
					console.log(res.data)

				})
			},
			zhengcetop() {
				this.zhengce = true
			},
			gaunbi() {
				this.$refs.popup.close()
			},
			shangquanindex(e) {
				this.indextab = e
				this.poiSearch(this.tabin[this.indextab].value, this.tablist[this.tablistindex].value)
			},
			brnindex(e) {
				this.buildType = e
				this.loadBuildingList(this.datadiceng, this.industryTag)
			},
			toggle(type) {
				this.type = type
				this.tablistindex = 0
				this.indextab = null
				this.clickPoiIndex = null
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				// this.poiSearch(this.tabin[this.indextab].value,this.tablist[this.tablistindex].value)
			},
			toggles(type) {
				this.type = type
				// this.selectMatchingTypes = []
				// this.selectPoiTypes = []
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popups.open(type)
			},
			tabbtnli(e) {
				this.tablistindex = e
				if (this.tabin[this.indextab]) {
					this.poiSearch(this.tabin[this.indextab].value, this.tablist[this.tablistindex].value)
				}
			},
			fanhui() {
				uni.navigateBack()
			},
			detail(e) {
				console.log(e)
				uni.setStorageSync('btn', JSON.stringify(e))
				uni.navigateTo({
					url: '/pages/home/homedetail?id=' + e.buildId
				})
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			loalon() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	}
				// });

			},
			poiSearch(typeCodes, radius) {
				this.typeCodes = typeCodes
				const mapRef = this.$refs.mapRef
				if (mapRef) {
					mapRef.addBuildingDatas([])
				}
				// this.$refs.popups.close()
				const params = {
					radius: radius || this.radius,
					typeCodes
				}
				if (this.streetCenter.lng && this.streetCenter.lat) {
					params.latitude = this.streetCenter.lat
					params.longitude = this.streetCenter.lng
				}
				this.poiList = []
				getPoiSearch(params).then(res => {
					if (res && res.code === 0) {
						const list = (res.data || []).map(item => {
							return {
								...item,
								typeCodes
							}
						})
						if (radius) {
							this.poiList = list
							this.clickPoiIndex = null
						}
						if (mapRef) {
							mapRef.addMatchingPoiDatas([...this.allPointList, ...list], typeCodes)
						}

					}
				})
			},
			poiClickHandler(data, index) {
				if (data.location) {
					const locations = data.location.split(',')
					this.longitude = parseFloat(locations[0])
					this.latitude = parseFloat(locations[1])
					this.scale = 19
					this.clickPoiIndex = index
				}
			},
			loadStreetPolygon(name) {
				const params = {
					streetName: name,
				}
				getStreetPolygon(params).then(res => {
					if (res && res.code === 0) {
						const data = res.data || {}
						const {
							lines,
							polygons
						} = getPolygonDatas([data])
						const center = getCenterPoint(data.center)
						// this.longitude = center.lng
						// this.latitude = center.lat
						this.streetCenter = center
						this.scale = 13
						const mapRef = this.$refs.mapRef
						if (mapRef) {
							// mapRef.addLabels(data.streetName,center)
							setTimeout(() => {
								mapRef.setPolygonsFitView(polygons, center)
								this.polyline = lines
								this.polygon = polygons
							}, 1000);
						}

					}
				})
			},
			loadBuildingList(streetName, industryTag) {
				const params = {
					street: streetName,
					industryTag: industryTag,
				}
				if (this.buildType) {
					params.buildType = this.buildType
				}
				getBuildingList(params).then(res => {
					if (res && res.code === 0) {
						const list = res.data || []
						var datalisttab = res.data
						datalisttab.sort((a, b) => {
						  if (a.keyStatus === b.keyStatus) {
						    return b.vacancyArea - a.vacancyArea;
						  }
						  return b.keyStatus - a.keyStatus;
						});
						
					
						console.log(datalisttab,6666666666);
						this.listtabbuild = datalisttab
						// this.listtabbuild = list
						// 行业查询没有经纬度，取第一条数据
						if (list.length > 0 && industryTag) {
							if (parseFloat(list[0].longitude) && parseFloat(list[0].latitude)) {
								this.streetCenter = {
									lng: list[0].longitude,
									lat: list[0].latitude
								}
								this.longitude = this.streetCenter.lng
								this.latitude = this.streetCenter.lat
							}
						}
						const mapRef = this.$refs.mapRef
						if (mapRef) {
							mapRef.addBuildingDatas(list, industryTag)
						}
					}
				})
			},
			loadMatchinglist(matType) {
				var data = {
					matchingType: matType,
					// radius: this.radius
					street: this.datadiceng
				}
				// if(this.streetCenter.lng && this.streetCenter.lat){
				// 	data.latitude = this.streetCenter.lat
				// 	data.longitude = this.streetCenter.lng
				// }
				getMatchinglistByStreet(data).then(res => {
					if (res && res.code === 0) {
						const list = (res.data || []).map(item => {
							return {
								...item,
								typeCodes: matType
							}
						}).filter(item => item.longitude && item.latitude)
						const mapRef = this.$refs.mapRef
						if (mapRef) {
							mapRef.addMatchingDatas(list)
						}
					}
				})
			},
			loadStreetJson() {
				uni.request({
					url: '/industry/static/街道坐标.json', // 注意路径
					method: 'GET',
					success: (res) => {
						const item = res.data.find(item => item.name === options.name)
						const points = []
						let sumLat = 0
						let sumLng = 0
						for (const item of item.coordinates) {
							const lng = item[0]
							const lat = item[1]

							points.push({
								longitude: lng,
								latitude: lat
							})

							sumLng += lng
							sumLat += lat
						}

						const polyline = [{
							points,
							color: "#0881FE", // 蓝色
							width: 5,
							dottedLine: true // 设置虚线
						}]

						const centerLng = sumLng / item.coordinates.length
						const centerLat = sumLat / item.coordinates.length

						this.longitude = centerLng
						this.latitude = centerLat
						// this.polyline = polyline
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			poiSearchHandler(typeCodes) {
				const index = this.selectPoiTypes.indexOf(typeCodes)
				if (index === -1) {
					this.selectPoiTypes.push(typeCodes)
				} else {
					this.selectPoiTypes.splice(index, 1)
				}
			},
			closeFilterHandler() {
				// this.selectPoiTypes = []
				// this.selectMatchingTypes = []
				this.$refs.popups.close()
			},
			loadAllDatas() {
				const mapRef = this.$refs.mapRef
				const empties = []

				if (mapRef) {
					mapRef.addBuildingDatas([])
				}
				if (this.selectMatchingTypes.length > 0) {
					this.allMatchingList = []
					// 创建所有请求的Promise数组
					mapRef.emptyList = []
					mapRef.emptyMarkers = []
					const promises = this.selectMatchingTypes.map(matType => {
						var data = {
							matchingType: matType,
							// radius: this.radius
							street: this.datadiceng
						}
						if(this.streetCenter.lng && this.streetCenter.lat){
							data.latitude = this.streetCenter.lat
							data.longitude = this.streetCenter.lng
						}
						// 返回一个Promise，确保即使请求失败也不会影响其他请求
						return getMatchinglistByStreet(data).then(res => {
							let data = []
							if (res && res.code === 0) {
								data = (res.data || []).map(item => {
									return {
										...item,
										typeCodes: matType
									}
								}).filter(item => item.longitude && item.latitude)
							}

							if (!data.length) {
								empties.push(matType)
							}

							return data
						}).catch(error => {
							console.error('请求失败:', error)
							return [] // 捕获错误，返回空数组
						})
					})

					// 使用Promise.all等待所有请求完成
					Promise.all(promises).then(results => {
						// 将所有结果合并到一个列表中
						const allData = results.flat() // 合并二维数组为一维数组
						// 处理合并后的数据
						if (mapRef) {
							this.allMatchingList = allData
							mapRef.addMatchingDatas(allData)
						}

						if (empties.length > 1 || this.industryTag) {
							this.emptyTypes = [...empties]

							this.$nextTick(() => {
								this.emptyTypes.forEach((_, index) => {
									setTimeout(() => {
										this.emptyTypes.pop()
									}, 3000 + 300 * index)
								})
							})
						} else {
							empties.forEach(matType => {
								mapRef.createEmptyMarker({
									latitude: this.streetCenter.lat,
									longitude: this.streetCenter.lng,
									iconType: matType,
								})
							})
						}
					})
				}
				if (this.selectPoiTypes.length > 0) {
					// 创建所有请求的Promise数组
					this.allPointList = []
					const promises = this.selectPoiTypes.map(typeCodes => {
						let radius = this.radius
						if (typeCodes === '151000') {
							radius = 3000 //口岸按3公里
						}
						var data = {
							radius: radius,
							typeCodes: typeCodes,
						}
						if (this.streetCenter.lng && this.streetCenter.lat) {
							data.latitude = this.streetCenter.lat
							data.longitude = this.streetCenter.lng
						}
						// 返回一个Promise，确保即使请求失败也不会影响其他请求
						return getPoiSearch(data).then(res => {
							if (res && res.code === 0) {
								const list = res.data || []
								return list.map(item => {
									return {
										...item,
										typeCodes: typeCodes,
									}
								})
							}
							return [] // 请求失败时返回空数组
						}).catch(error => {
							console.error('请求失败:', error)
							return [] // 捕获错误，返回空数组
						})
					})

					// 使用Promise.all等待所有请求完成
					Promise.all(promises).then(results => {
						// 将所有结果合并到一个列表中
						const allData = results.flat() // 合并二维数组为一维数组
						// 处理合并后的数据
						const mapRef = this.$refs.mapRef
						if (mapRef) {
							this.allPointList = allData
							mapRef.addMatchingPoiDatas([...this.poiList, ...allData])
						}
					})
				}
				this.closeFilterHandler()
			},
			refreshData() {
				const mapRef = this.$refs.mapRef
				if (mapRef) {
					mapRef.addBuildingDatas(this.listtabbuild, this.industryTag)
				}
			},
			clearAllDatas() {
				const mapRef = this.$refs.mapRef
				if (mapRef) {
					this.selectPoiTypes = []
					this.selectMatchingTypes = []
					this.allMatchingList = []
					this.allPointList = []
					mapRef.addMatchingDatas([])
					mapRef.addMatchingPoiDatas(this.poiList, this.typeCodes)
					mapRef.emptyList = []
					mapRef.emptyMarkers = []
				}
				if (this.poiList.length === 0) {
					this.refreshData()
				}
			},
			clearFilterData() {
				this.poiList = []
				const mapRef = this.$refs.mapRef
				if (mapRef) {
					this.poiList = []
					mapRef.addMatchingPoiDatas(this.allPointList)
				}
				if (this.allMatchingList.length === 0 && this.allPointList.length === 0) {
					this.refreshData()
				}
			},
			resetLocation() {
				const mapRef = this.$refs.mapRef
				if (mapRef) {
					mapRef.setPolygonsFitView(this.polygon, this.streetCenter)
				}
			},
			searchHandler() {
				this.$refs.searchPopup.open()
			},
			closeSearchHandler() {
				this.$refs.searchPopup.close()
			},
			// AI按钮拖动事件处理
			handleAiButtonTouchStart(e) {
				const touch = e.touches[0];
				this.aiButton.startX = touch.clientX - this.aiButton.x;
				this.aiButton.startY = touch.clientY - this.aiButton.y;

				// 设置长按定时器
				this.aiButton.longPressTimer = setTimeout(() => {
					this.aiButton.isDragging = true;
					uni.vibrateShort(); // 震动反馈
				}, 500); // 500ms后判定为长按
			},
			handleAiButtonTouchMove(e) {
				if (!this.aiButton.isDragging) {
					return;
				}

				const touch = e.touches[0];
				this.aiButton.x = touch.clientX - this.aiButton.startX;
				this.aiButton.y = touch.clientY - this.aiButton.startY;
			},
			handleAiButtonTouchEnd(e) {
				// 清除长按定时器
				if (this.aiButton.longPressTimer) {
					clearTimeout(this.aiButton.longPressTimer);
					this.aiButton.longPressTimer = null;
				}

				// 如果不是拖动状态,则执行点击事件
				if (!this.aiButton.isDragging) {
					this.tishikuang();
				}

				this.aiButton.isDragging = false;
			},
		}
	}
</script>

<style scoped>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 294rpx;
		height: 363rpx;
		font-size: 36rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		box-shadow: 0px 1px 10px 0px rgba(199, 210, 228, 0.5);
	}

	.fanhui_betn {
		width: 76rpx;
		height: 76rpx;
		float: left;
		background: #fff;
		border-radius: 5px;
		margin-top: 10rpx;
	}

	.img_fanbtn {
		width: 32rpx;
		height: 32rpx;
		float: left;
		margin-top: 23rpx;
		margin-left: 23rpx;
	}

	.fanhui_betns {
		width: 100rpx;
		height: 100rpx;
		float: left;
		border-radius: 5px;
	}

	.listta {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.img_tab {
		width: 100%;
		height: 190rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.wuyeleixin {
		width: 100%;
		height: 572rpx;
		border-radius: 25rpx;
		opacity: 1;
		margin-top: 20rpx;
		float: left;
		background: rgba(255, 255, 255, 0.9);

		box-shadow: 0px 1px 10px 0px rgba(199, 210, 228, 0.5);
	}

	.xinxili {
		width: 130rpx;
		height: 60rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: #F4F6FB;
		margin-left: 20rpx;
		float: left;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.xinxilis {
		width: 90rpx;
		height: 45rpx;
		border-radius: 22.5px;
		opacity: 1;
		background: #F4F5F7;
		margin-left: 20rpx;
		float: left;
		text-align: center;
		line-height: 45rpx;
		font-size: 26rpx;
	}

	.mishuL {
		color: #1684FC;
	}

	.quabu {
		color: #fff;
		background: #1684FC;

	}

	.quanbuxx {
		color: #000;
	}

	.left_tab_sq {
		width: 30%;
		height: 300rpx;
		background: #f6f5f5;
		float: left;
		margin-top: 20rpx;
	}

	.right_tab_sq {
		width: 70%;
		height: 300rpx;
		float: left;
		margin-top: 20rpx;
		font-size: 26rpx;
		text-align: center;
		overflow-y: auto;
	}

	.shangquanxli {
		width: 100%;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.wenziquyu {
		color: #1684FC;
		text-align: left;
		padding: 8px 16px;
		border-left: 1rpx solid #ffffff;
	}

	.wenziquyu_sqbjs {
		border-left: 1rpx solid #1684FC;
	}

	.sqbjs {
		background: #fff;
		border-left: 1rpx solid #1684FC;
	}

	.sqntms {

		border-left: 1rpx solid #fff;
	}

	.mapbtn .amap-marker .amap-icon img {
		border-radius: 100px !important;
	}

	.header_li {
		width: 100%;
		height: 100rpx;
		float: left;
	}

	.header_li_ledft {
		width: 90%;
		margin-left: 5%;
		float: left;
	}

	.ai-button-container {
		float: left;
		position: relative;
		z-index: 9999;
		cursor: move;
		user-select: none;
		-webkit-user-select: none;
		touch-action: none;
		padding: 40rpx;
		pointer-events: auto;
	}

	.mat_selected {
		position: relative;
	}

	.mat_selected::after {
		content: '';
		position: absolute;
		top: 0;
		right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		background-image: url('~@/static/selected_circle.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
</style>